<template>
    <transition name="xpDialog">
        <div class="app-dialog gs-filter" v-show="visible" @contextmenu.prevent="null">
            <div class="flex-between app-dialog-header">
                <p>我的应用</p>
                <el-icon @click.stop="handleClose"><CloseBold /></el-icon>
            </div>
            <div style="padding:20px 30px 10px">
                <div class="input-search">
                    <el-icon><Search /></el-icon>
                    <input type="text" v-model="searchValue" placeholder="搜索应用" @keyup.enter="search">
                </div>
            </div>
            <div
            class="app-dialog-body scrollbar" @contextmenu.prevent="handleMenu($event, 'menuVisible')">
                <ul
                ref="appBoxNode"
                id="app-dialog-box"
                @dragstart="onDragStart"
                @dragover="onDragOver($event, 'appBoxNode')"
                @dragend="onDragEnd($event, 'appBoxNode', null)">
                    <li 
                    draggable="true"
                    v-for="item in searchData.length?searchData:appStore.appData" 
                    :key="item.name"
                    :data-key="item.id"
                    :is-folder="item.isFolder"
                    @mousedown="folderVisible=false"
                    @contextmenu.prevent="handleMenu($event, 'appMenuVisible', item)"
                    class="app-content flex-column-center">
                        <template v-if="!item.isFolder">
                            <div class="app-img" @click="handleOpen(item)">
                                <img
                                :style="{backgroundColor:item.background}"
                                :src="CheckFullUrl(item.icon)" 
                                draggable="false"/>
                            </div>
                            <p class="oneline">{{item.name}}</p>
                        </template>
                        <template v-else>
                            <div class="app-img app-folder" @click="openFolder(item)">
                                <img 
                                v-for="i in item.children" 
                                :key="i.id" :src="CheckFullUrl(i.icon)"
                                :style="{backgroundColor:i.background}"/>
                            </div>
                            <p class="oneline">{{item.name}}</p>
                        </template>
                    </li>
                </ul>
            </div>
            <transition name="xpDialog">
                <appFolder
                v-if="folderVisible"
                :visible="folderVisible"
                :folderData="folderData"
                @open="handleOpen"
                @menu="handleFolderAppMenu"
                @close="folderVisible=false">
                </appFolder>
            </transition>

        </div>
    </transition>
 </template>
 
<script lang='ts'>
import { reactive, toRefs, watch, getCurrentInstance, ref, provide, watchEffect } from 'vue';
import { useAppStore } from '@/store/app';
import useIconDrag from '@/hooks/useIconDrag';
import appFolder from './appFolder.vue';
import useCheck from '@/hooks/useCheck';
export default {
    name:'appDialog',
    props: {
        visible:{
            type:Boolean,
            default:false
        },
        dataSource:{
            type:Array,
            default:[] as any
        }
    },
    components: {
        appFolder
    },
    emits:['close', 'menu', 'open'],
    setup (props, context) 
    {
        const appStore = useAppStore();
        const { proxy }:any = getCurrentInstance();
        let data = reactive({
            folderData:null as any,
            folderVisible:false,
            searchValue:'',
            searchData:[] as any
        });
        let methods = {
            search ()
            {
                if (data.searchValue.trim() === '') return data.searchData = [];
                let reg = new RegExp(data.searchValue, 'i');
                appStore.appData.forEach((item) => 
                {
                    if (item.children) 
                    {
                        item.children.forEach((i) => 
                        {
                            if (reg.test(i.name))
                            {
                                data.searchData.push(i);
                            }
                        });
                        return;
                    }
                    if (reg.test(item.name))
                    {
                        data.searchData.push(item);
                    }
                });
                if (!data.searchData.length)
                {
                    proxy.$message.info('暂无该应用');
                }
            },
            handleClose ()
            {
                context.emit('close');
            },
            openFolder (item)
            {
                data.folderVisible = true;
                data.folderData = item;
            },
            handleMenu (e, value, item = null)
            {
                data.folderVisible = false;
                if (value === 'appMenuVisible')
                {
                    e.stopPropagation();
                }
                context.emit('menu', e, value, item);
            },
            handleFolderAppMenu (e, value, item = null)
            {
                if (value === 'appMenuVisible')
                {
                    e.stopPropagation();
                }
                context.emit('menu', e, value, item);
            },
            handleOpen (item)
            {
                context.emit('open', item);
            }
        };

        watchEffect(() => 
        {
            if (data.searchValue.trim() === '')
            {
                data.searchData = [];
            }
        });
        
        return { 
            ...toRefs(data),
            ...methods,
            appStore,
            ...useIconDrag(),
            ...useCheck()
        };
    }
};
</script>
 
<style scoped lang="scss">
.app-dialog {
    position: absolute;
    top:10%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 80%;
    height: 70%;
    padding: 10px 20px;
    border-radius: 10px;
}

.app-dialog-header {
    height: 30px;
    font-size: 16px;
    font-weight: 600;

    p {
        width: 100%;
        text-align: center;
    }

    i {
        font-size: 16px;
        cursor: pointer;

        &:hover {
            color:$PrimaryColor;
        }
    }
}
.app-dialog-body {
    height: calc(100% - 125px);
    max-height:calc(100% - 125px);
    overflow-y: auto;
    margin-top: 15px;
}

#app-dialog-box {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns:repeat(auto-fill,100px);
    grid-template-rows: repeat(auto-fill,100px);
    justify-content: center;
    grid-auto-flow: dense;
}


.app-content {
    margin: 5px 10px;


    .app-folder {
        display: grid;
        grid-template-columns:repeat(3,1fr);
        grid-template-rows: repeat(3,1fr);
        padding: 3px;
        background-color: #0000006e !important;

        img {
            border-radius: 5px;
            margin: 1.3px 1px;
            width: 16px;
            height: 16px;
            -webkit-user-drag:none; 
        }
    }

    .app-img {
        width: 60px;
        height: 60px;
        background-color: $PageBackgroundColor;
        box-shadow: 0 0 5px #0000001a;
        transition: all .2s;
        cursor: pointer;
        overflow: hidden;
        border-radius: 10px;

        &:hover {
            transform: scale(1.1);
        }
    }

    p {
        font-size: 14px;
        margin-top: 5px;
    }


    // img {
    //     background-color: #fe1816;
    // }
}
.input-search {
    background-color: transparent;

    &:focus-within {
        border: 1px solid $PrimaryColor;
        background-color: transparent;
    }
}


</style>
 